<template>
    <a-drawer 
        v-model:open="state.open" 
        placement="right" 
        width="35%"
        :closable="false"
        @close="handleCancle"
    >
      <template #title>
        <edit-title v-model="copyConfig.name"/>
      </template>
      <div class="copy-drawer-content">
        <a-button @click="openSelectUser" class="mb-2">
          设置抄送人
        </a-button>
        <div class="ccs-list">
          <a-tag v-for="user in copyConfig.ccs" :key="user.id" class="mb-2">
            <span class="mr-1">{{ user.realName }}</span>
          </a-tag>
        </div>
        <select-org-user ref="selectOrgUserRef" @save="saveSelectedUser" mode="multiple"/>
      </div>
      <template #footer>
        <section class="flow-btn-box">
          <a-button @click="handleCancle">取消</a-button>
          <a-button type="primary" @click="save">保存</a-button>
        </section>
      </template>
    </a-drawer>
</template>

<script setup lang="ts">
import type LogicFlow from '@logicflow/core';
import { reactive, useTemplateRef } from 'vue';
import editTitle from './editTitle.vue';
import type { CopyNodeType, CopyProperties } from '../types';
import selectOrgUser from '@/components/select-org-user/index.vue'

// @ts-ignore
let copyConfig = reactive<CopyProperties>({})
const selectOrgUserRef = useTemplateRef('selectOrgUserRef')
const state = reactive<{
  lf:LogicFlow | null
  open:boolean,
  activeNode:CopyNodeType
}>({
  open: false,
  // @ts-ignore
  activeNode:null,
  lf:null
})
const handleCancle = ()=>{
  state.open = false
  copyConfig = reactive({})
  state.lf = null
  state.activeNode = null
}
const handleOpen = (node:any,lf:LogicFlow) => {
    state.open = true
    state.activeNode = node
    Object.assign(copyConfig,node.properties)
    state.lf = lf
}
const save = ()=>{
  let desc = "抄送人:"
  desc += copyConfig.ccs!.map((item)=>{
    return item.realName
  }).join(',')
  state.lf?.setProperties(
    state.activeNode.id,
    {
      ...copyConfig,
      desc
    }
  )
  handleCancle()
}
const saveSelectedUser = (users:any[])=>{
  copyConfig.ccs = users
}
const openSelectUser = ()=>{
  const userIds = Array.isArray(copyConfig.ccs) ? copyConfig.ccs!.map((item:any) => item.id) : []
  selectOrgUserRef.value?.handleOpen(userIds)
}
defineExpose({
    handleOpen
})
</script>

<style lang='scss' scoped>
.flow-btn-box{
    display: flex;
    justify-content: end;
    gap: 12px;
}
.copy-drawer-content{

}
</style>